<template>
    <view style="padding: 60px 40px;">
        <u-input placeholder="请输入手机号" type="number" border="surround" v-model="phone"
            customStyle="margin-bottom: 20px;border:1px solid #f0f0f0"></u-input>
        <u-input placeholder="请输入验证码" customStyle="margin-bottom: 20px;border:1px solid #f0f0f0" type="number"
            v-model="captcha">
            <template slot="suffix">
                <u-code ref="uCode" @change="codeChange" :seconds="seconds" ></u-code>
                <u-button @tap="getCode" :text="tips" type="primary" size="mini"></u-button>

            </template>
        </u-input>
        <u-button type="primary" @click="updUserPhone">绑定手机号</u-button>
    </view>
</template>

<script>
export default {
    name: "mobile",
    props: {
        isshow: {
            type: Object,
        },
    },
    watch: {
        isshow(newval, oldval) {
            this.show = newval
        }
    },
    data() {
        return {
            tips: '',
            phone: '',
            captcha: '',
            seconds:20
        }
    },
    methods: {
        codeChange(text) {
            this.tips = text;
            // console.log(text);
        },
        async getCode() {
            if (!this.phone) return uni.$u.toast('请先输入手机号');

            if (this.$refs.uCode.canGetCode) {
                // 模拟向后端请求验证码
                uni.showLoading({
                    title: '正在获取验证码'
                })
                const res = await this.$api.VerifyCode({})
                const data = await this.$api.getMobileCode({
                    phone: this.phone,
                    type: 'login',
                    key:res.key
                })
                // console.log(data,'datadata');
                uni.hideLoading();
                // 这里此提示会被this.start()方法中的提示覆盖
               global.showToast('验证码发送成功')
                // 通知验证码组件内部开始倒计时
                this.$refs.uCode.start();
            } else {
                uni.$u.toast('倒计时结束后再发送');
            }
        },
        async updUserPhone() {
            if (!this.phone) return uni.$u.toast('请先输入手机号');
            if (!this.captcha) return uni.$u.toast('请先输入验证码');
            var uid = wx.getStorageSync('uid')
            const res = await global.miniGetPhone({
                phone: this.phone,
                captcha: this.captcha
            })
            global.showToast('绑定手机号成功')
            uni.setStorageSync('token', res.token)

            const user = await global.getUser({})
            uni.setStorageSync('userInfo', user)
            uni.setStorageSync('uPhone', user.phone)
            uni.navigateBack({
                delta: 1,
            });


        }
    }
}
</script>

<style scoped lang="scss">
.wxWrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);

    >view {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 60upx;
        background: white;
        border-radius: 40upx 40upx 0upx 0upx;
        padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    &_t {
        font-size: 48upx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 38upx;
    }

    &_f {
        color: #666666;
        font-size: 44upx;
        margin-bottom: 80upx;
    }
}
</style>